const imgs = [
  "./imgs/1.jpg",
  "./imgs/2.jpg",
  "./imgs/3.webp",
  "./imgs/4.png",
  "./imgs/5.jpg",
];

// TODO: 修改补充代码
let item = document.querySelector(".active");

let current = 0;

// TODO: 补充代码
function showSlide() {
  document.querySelector(".item").src = `${imgs[current]}`
}

function prevSlide() {
  current  = current == 0 ? 4 : current-1;
  showSlide();
  updateDots();
}

function nextSlide() {
  current  = current == 4? 0 : current+1;
  showSlide();
  updateDots();
}

let timer = setInterval(()=>{current = current == 4? 0 : current+1}, 3000);

function pauseTimer() {
  clearInterval(timer);
  updateDots();
}
function resumeTimer() {
  timer = setInterval(nextSlide, 3000);
}
// 鼠标悬停时暂停自动轮播，
document.querySelector("#carousel").addEventListener("mouseover", pauseTimer);
// TODO: 补充代码，鼠标移出时恢复自动轮播


// TODO: 修改代码
let dots = document.querySelectorAll(".dots li");
// TODO: 添加代码
// 更新小圆点的样式
// 通过遍历所有小圆点，移除active类名，然后为当前索引的小圆点添加active类名。
function updateDots() {
  item = document.querySelector(".active");
  item.classList.remove("active");
  dots[current].classList.add("active");
  console.log(current);
}

// 跳转到指定的轮播项
// 通过设置current变量为指定的索引，然后调用showSlide函数显示对应的轮播项。
function jumpToSlide(index) {
  current = index;
  showSlide();
  updateDots();
}
